<template>
  <div id="userPage">
    <HeadNav
      type="application"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="application" sort="authors"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower == 1">
            <div class="model-container">
              <div class="model-bg" style="min-height: 660px">
                <div class="section-title">作者信息</div>
                <div class="container" style="padding-bottom: 20px">
                  <div class="option">
                    <span class="lable top">作者头像</span>
                    <div class="normal">
                      <img
                        :src="authorInfo.photo"
                        alt=""
                        style="width: 80px; height: 80px"
                        v-if="authorInfo.photo"
                      />
                      <span
                        v-else
                        class="no-pic"
                        style="
                          min-width: 80px;
                          min-height: 80px;
                          border-radius: 10px;
                        "
                      ></span>
                    </div>
                    <div
                      class="uploadPackage"
                      style="
                        display: inline-block;
                        vertical-align: top;
                        margin-left: 5px;
                        width: 100px;
                        height: 32px;
                        overflow: hidden;
                      "
                    >
                      <a-upload
                        name="file"
                        accept=".png,.jpg,.jpeg"
                        :customRequest="handleChange"
                      >
                        <a-button> <a-icon type="upload" /> 上传图片 </a-button>
                      </a-upload>
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable">*作者名称</span>
                    <div class="normal" style="width: 460px">
                      <a-input
                        placeholder="输入作者名称"
                        v-model="authorInfo.name"
                      />
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable">国家</span>
                    <div class="normal">
                      <a-select
                        show-search
                        placeholder="请选择国家"
                        option-filter-prop="children"
                        style="width: 220px"
                        :filter-option="onSearch"
                        @change="selectOpt"
                      >
                        <a-select-option v-for="(citem,cindex) in countryList" :key="cindex" :value="citem.code">
                          {{citem.country}}
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable">作者类型</span>
                    <div class="normal">
                      <a-select
                        placeholder="请选择作者类型"
                        option-filter-prop="children"
                        style="width: 220px"
                        :filter-option="onSearch"
                        v-model="authorInfo.author_type"
                      >
                        <a-select-option
                          v-for="(citem, cindex) in authorTypeList"
                          :key="cindex"
                          :value="citem.type"
                        >
                          {{ citem.name }}
                        </a-select-option>
                      </a-select>
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable">生日</span>
                    <div class="normal" style="width: 460px">
                      <a-date-picker
                        @change="onChangeBirth"
                        inputReadOnly
                        v-model="authorInfo.birthday"
                      />
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable">逝世</span>
                    <div class="normal" style="width: 460px">
                      <a-date-picker
                        @change="onChangeDeath"
                        inputReadOnly
                        v-model="authorInfo.death_date"
                      />
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable top">作者介绍</span>
                    <div class="normal" style="width: 800px">
                      <a-textarea
                        placeholder="请输入作者介绍"
                        v-model="authorInfo.description"
                        style="height: 180px"
                      />
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable">微博链接</span>
                    <div class="normal" style="width: 460px">
                      <a-input
                        placeholder="输入微博链接"
                        v-model="authorInfo.weiboUrl"
                      />
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable">抖音链接</span>
                    <div class="normal" style="width: 460px">
                      <a-input
                        placeholder="输入抖音链接"
                        v-model="authorInfo.tiktokUrl"
                      />
                    </div>
                  </div>
                  <div class="option">
                    <span class="lable">是否加入排行</span>
                    <div class="normal">
                      <a-switch v-model="isRank" />
                    </div>
                  </div>
                  <div class="option" style="margin-top: 50px">
                    <span class="lable"></span>
                    <div class="normal">
                      <a-button type="primary" @click="save">保存修改</a-button>
                      <a-button
                        type="default"
                        style="margin-left: 5px"
                        @click="$router.go(-1)"
                        >放弃</a-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/user/information.scss"></style>
<script>
import {
  INDUSTRY_AUTHOR_GOODS_ADD,
} from "../../apis/industry.js";
import { COMMON_COUNTRY } from "../../apis/common.js";
export default {
  data() {
    return {
      pagePower: 1,
      authorId: 0,
      isLoading: false,
      pic: "",
      authorInfo: {
        name: "", // 名称
        country: "", // 国家
        birthday: "", // 生日
        death_date: "", // 死亡日期
        countryCode: "", // 国籍code
        description: "",
        weiboUrl: "",
        tiktokUrl: "",
        photo: "", 
      },
      isRank: false,
      countryList: [],
      choose: false,
      inputVal: "",
      authorTypeList:[
        {name:"当代作家",type:1},
        {name:"公版书作家",type:2},
        {name:"译者",type:3},
        {name:"编者",type:4},
        {name:"工作室",type:5},
      ]
    };
  },
  mounted() {
    this.authorId = this.$route.query.author_id;
    this.pagePower = this.$refs.head.accountInfo.type;
    this.getCountry();
  },
  methods: {
    async getCountry() {
      var tStamp = this.$getTimeStamp();
      let data = {
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMMON_COUNTRY(data);
      if (res.code == 0) {
        this.countryList = [];
        this.countryList = res.data;
      } else {
        this.isLoading = false;
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    async upload(_content) {
      var tStamp = this.$getTimeStamp();
      let data = {
        // aaa: _content,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let formData = new FormData(),
        _this = this;
      formData.append("file", _content);
      formData.append("timestamp", tStamp);
      formData.append("sign", data.sign);
      this.$axios({
        url: _this.$baseUrl + "/common/upload",
        method: "post",
        data: formData,
      }).then((res) => {
        if (res.data.code == 0) {
          _this.$refs.head.globalTip(2, "上传成功！", 0);
          _this.authorInfo.photo = res.data.data.file;
        } else {
          _this.$refs.head.globalTip(1, res.data.message, res.data.code);
        }
      });
    },
    async saveAuthor() {
      var tStamp = this.$getTimeStamp();
      let data = {
        pic: this.authorInfo.photo,
        author_name: this.authorInfo.name,
        country_code: this.authorInfo.countryCode,
        birth_date: this.authorInfo.birthday,
        death_date: this.authorInfo.death_date,
        description: this.authorInfo.description,
        weibo_link: this.authorInfo.weiboUrl,
        douyin_link: this.authorInfo.tiktokUrl,
        is_rank: this.isRank?1:0,
        author_type: this.authorInfo.author_type?this.authorInfo.author_type:0,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_AUTHOR_GOODS_ADD(data);
      if (res.code == 0) {
        this.$refs.head.globalTip(2, "新建成功！", 0);
        let _this = this;
        setTimeout(() => {
          _this.$router.go(-1);
        }, 1000);
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    handleChange(info) {
      this.upload(info.file);
    },
    onSearch(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    selectOpt(value) {
      this.authorInfo.countryCode = value;
    },
    onChangeBirth(date, dateString) {
      this.authorInfo.birthday = dateString;
    },
    onChangeDeath(date, dateString) {
      this.authorInfo.death_date = dateString;
    },
    save() {
      if (this.authorInfo.name.length == 0) {
        this.$refs.head.globalTip(1, "作者名称不能为空", 0);
        return;
      }
      this.saveAuthor();
    },
    publisherChange() {
      this.pagePower = this.$refs.head.accountInfo.type;
    },
  },
};
</script>
